import styles from './styles.module.scss'
import Logo from '@/assets/logo.png'
import Link from 'next/link'
import { Popover } from 'antd';
import useNavData from '@/store/getters/home'
import { useRouter } from 'next/router';
import Head from 'next/head';
import RenderJudge from '../RenderJudge';
import { CapsuleTabs } from 'antd-mobile/2x'
import { Tabs } from 'antd-mobile/2x'
import MobileLogo from '@/assets/mobile/logo.png'
import { useRef } from 'react';
import { useEffect } from 'react';
import { useSize } from 'ahooks';
const Header = ({ mobile }) => {
  const { navData } = useNavData()
  const route = useRouter()
  const headerRef = useRef()
  const size = useSize(headerRef)
  useEffect(() => {
    document.querySelector(":root")?.style?.setProperty("--H5TopHeaderHeight", (size?.height || 0) + "px")
  }, [size?.height])

  const link = (row, second) => Reflect.get(second, row?.linkId)

  const active = (row, isIndex = false) => {
    if (isIndex) return route?.asPath === "/"
    return route?.asPath?.includes(row?.active)
  }


  const defaultActiveId = () => {
    if (route?.asPath === "/") return String(0)
    const item = navData?.find(row => route?.asPath?.includes(row?.active) && row?.active !== '/')
    return String(item?.key)
  }

  const secondDefaultActiveId = (row) => {
    const { nav } = row
    const id = route?.query?.id?.[0]
    if (id) {
      const currentInfo = nav?.find(item => String(Reflect.get(item, row.linkId)) === String(id)) || {}
      return Reflect.get(currentInfo, row?.linkId)
    }
    return null
  }

  //展示底部的二级导航的条件,是否必须有某个字段属性
  const navShowConditionResult = (row, second) => (Reflect.has(second, row?.navShowCondition) && Reflect.get(second, row?.navShowCondition) !== '')

  return (
    <>
      <RenderJudge value={mobile} active={
        <header className={styles.h5Nav} ref={headerRef}>
          <Link href={process.env.NEXT_PUBLIC_DOWNLOADLINK}>
            <a>
              <img src={MobileLogo.src} alt="" />
              <span>下载App</span>
            </a>
          </Link>
          <CapsuleTabs defaultActiveKey={defaultActiveId()}>
            {
              navData?.map((row, index) => (
                <CapsuleTabs.Tab destroyOnClose={true} key={row?.key} title={
                  <Link href={row?.h5Link || row?.link}>
                    <a>{row?.name}</a>
                  </Link>
                }>
                  <Tabs defaultActiveKey={String(secondDefaultActiveId(row))}>
                    {
                      (() => {
                        const secondData = row?.nav?.filter(r => navShowConditionResult(row, r)) || []
                        return (
                          secondData?.map(second => (
                            <Tabs.Tab key={Reflect.get(second, row?.linkId)} destroyOnClose title={
                              <Link href={row?.navLink + "/" + link(row, second)} key={second.id}>
                                <a title={link(row, second)} key={second.id + row?.id}>
                                  {Reflect.get(second, row.titleKey)}
                                </a>
                              </Link>
                            } />
                          ))
                        )
                      })()
                    }
                  </Tabs>
                </CapsuleTabs.Tab>
              ))
            }
          </CapsuleTabs>
        </header>
      } inactive={
        <>
          <Head>
            <title>鑫球体育网</title>
          </Head>
          <header className={styles.header}>
            <nav>
              <Link href="/">
                <a className={styles.logo}>
                  <img src={Logo.src} alt="" />
                </a>
              </Link>
              <ul className={styles.navlink}>
                {
                  navData?.map((row, index) => {
                    const item = <a className={active(row, row?.key === 0) ? styles.active : null} href={row?.link} >{row?.name}</a>
                    if (row?.nav?.length === 0) return item
                    return (
                      <Popover key={index} overlayClassName={styles.linktype} placement="bottom" content={(
                        <section className={styles.card}>
                          {
                            row?.nav?.map(second => (
                              <RenderJudge key={Reflect.get(second, row?.linkId)} value={navShowConditionResult(row, second)} active={
                                <Link href={row?.navLink + "/" + link(row, second)} key={second.id}>
                                  <a target="_blank" key={second.id + row?.id}>
                                    {Reflect.get(second, row.titleKey)}
                                  </a>
                                </Link>
                              } />
                            ))
                          }
                        </section>

                      )} title={null} trigger="hover"  >
                        {item}
                      </Popover>)
                  })
                }
              </ul>
            </nav>
          </header>
        </>
      } />
    </>
  )
}


export default Header